import React ,{Component} from 'react';
import './DgoBack.css';
import {Icon} from 'antd';
import {withRouter,NavLink} from 'react-router-dom';
class Goback extends Component {
     
    constructor(props){
        super(props);
        this.state={
            opacityStyle: {
                opacity: 0
              },
              showGoback:true
        };
        this.handleScroll = this.handleScroll.bind(this)
    }
   handleScroll = ()=>{
       let top = document.documentElement.scrollTop || document.body.scrollTop;
      
       if(top > 60){
         let opacity = top/140;
         opacity = opacity>1?1:opacity;
         this.setState({
            opacityStyle:{
                opacity:opacity
            },
            showGoback:false
         });

       }else{
        this.setState({
            opacityStyle:{
                opacity:0
            },
            showGoback:true
         })
       }
   }
    componentDidMount = ()=>{
        window.addEventListener('scroll', this.handleScroll);     
    }
    componentWillUnmount = ()=>{
        window.removeEventListener('scroll', this.handleScroll);     
    }
    
    render (){
        let {opacityStyle,showGoback} = this.state;
        let showGobackDom = showGoback?<div className="backIcon">
                <NavLink to="/Home" activeStyle={{ color: '#4dc060' }}>
                <Icon type="left-circle" style={{ fontSize: 22, color: '#000' }}/>
                </NavLink>
            </div>:'';
        return (
            <div className="gobox">
                <div className="Goback" style={opacityStyle}>
                    <NavLink to="/Home" activeStyle={{ color: '#4dc060' }}>
                    <Icon type="left" style={{ fontSize: 18, color: '#ffffff' ,float:'left',marginTop:'10px'}}/>
                    </NavLink>
                    景点详情
                </div>
                {showGobackDom}
            </div>
        )
    }
}
export default  withRouter(Goback);